import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:life_service/color/hex.dart';
import 'package:life_service/extensions/ex_widget.dart';
import 'package:life_service/route/index.dart';
import 'package:life_service/utils/styles.dart';

class HomeCollectController extends GetxController {
  int total = 34;

  int page = 1;

  int size = 10;

  RxInt count = RxInt(10);

  RxBool loading = RxBool(false);

  void loadData() {
    if (loading.isTrue) {
      return;
    }
    if (count >= total) {
      return;
    }
    loading.value = true;
    page++;
    Future.delayed(const Duration(seconds: 3), () {
      loading.value = false;
      count.value = page * size;
    });
  }
}

class HomeCollectView extends GetView<HomeCollectController> {
  const HomeCollectView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        leading: Text(
          '收藏',
          style: StylesUtils.customTextStyle(
            color: HexColor.color3333,
            fontSize: StylesUtils.fontSize18,
            fontWeight: FontWeight.w700,
          ),
        ).center(),
        elevation: 1,
        shadowColor: HexColor(HexColor.colorF2f2),
        systemOverlayStyle: SystemUiOverlayStyle.dark,
      ),
      body: NotificationListener<ScrollNotification>(
        onNotification: (ScrollNotification notification) {
          if (notification is OverscrollNotification) {
            /// 加载更多
            Get.engine.addPostFrameCallback((_) {
              controller.loadData();
            });
          } else if (notification is ScrollEndNotification) {}
          return false;
        },
        child: Obx(
          () => ListView.builder(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            itemBuilder: (BuildContext context, int index) {
              if (index < controller.count.value) {
                return Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Stack(
                      children: [
                        ClipRRect(
                          borderRadius: BorderRadius.circular(8),
                          child: Image.network(
                            'https://img1.baidu.com/it/u=1987538370,2031243179&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400',
                            width: 160,
                            height: 110,
                            fit: BoxFit.fill,
                          ),
                        ),
                        Positioned(
                          top: 8,
                          right: 20,
                          child: Container(
                            constraints: const BoxConstraints.expand(
                                width: 82, height: 20),
                            decoration: BoxDecoration(
                              color: HexColor.rgba(0, 0, 0, 0.498039215686275),
                              borderRadius: BorderRadius.circular(10),
                            ),
                            alignment: Alignment.center,
                            child: Text(
                              '南锣鼓巷附近',
                              style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize10,
                              ),
                            ),
                          ),
                        )
                      ],
                    ),
                    Expanded(
                      child: Padding(
                        padding: const EdgeInsets.only(left: 10),
                        child: Column(
                          children: [
                            Container(
                              margin: const EdgeInsets.only(top: 10),
                              alignment: Alignment.centerLeft,
                              child: Text(
                                '锦江之星（背景王府井店）',
                                style: StylesUtils.customTextStyle(
                                  fontWeight: FontWeight.w700,
                                  color: HexColor.color3333,
                                ),
                              ),
                            ),
                            Container(
                              margin: const EdgeInsets.symmetric(vertical: 15),
                              alignment: Alignment.centerLeft,
                              child: Wrap(
                                spacing: 10,
                                alignment: WrapAlignment.start,
                                crossAxisAlignment: WrapCrossAlignment.center,
                                children: [
                                  Text(
                                    '4.6分',
                                    style: StylesUtils.customTextStyle(
                                      color: HexColor.color28d0,
                                      fontWeight: FontWeight.w700,
                                    ),
                                  ),
                                  Text(
                                    '5000+消费',
                                    style: StylesUtils.customTextStyle(
                                      color: HexColor.color3333,
                                      fontSize: StylesUtils.fontSize12,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            Container(
                              alignment: Alignment.centerLeft,
                              child: Wrap(
                                spacing: 10,
                                alignment: WrapAlignment.start,
                                crossAxisAlignment: WrapCrossAlignment.center,
                                children: [
                                  Text(
                                    '￥360',
                                    style: StylesUtils.customTextStyle(
                                      color: HexColor.colorFf62,
                                      fontWeight: FontWeight.w700,
                                      fontSize: StylesUtils.fontSize16,
                                    ),
                                  ),
                                  Text(
                                    '起',
                                    style: StylesUtils.customTextStyle(
                                        fontSize: StylesUtils.fontSize12,
                                        color: HexColor.color9999),
                                  ),
                                  Container(
                                    constraints: const BoxConstraints.expand(
                                        width: 55, height: 20),
                                    alignment: Alignment.center,
                                    decoration: BoxDecoration(
                                      border: Border.all(
                                        color: HexColor(HexColor.colorFfc7),
                                      ),
                                    ),
                                    child: Text(
                                      '新人红包',
                                      style: StylesUtils.customTextStyle(
                                        color: HexColor.colorFfc7,
                                        fontSize: StylesUtils.fontSize10,
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ).paddingOnly(top: 15).onTap(() {
                  Get.toNamed(Routes.hotelMain);
                });
              }
              return Obx(loadDataItem);
            },
            itemCount: controller.count.value + 1,
          ),
        ),
      ),
    );
  }

  Widget loadDataItem() {
    if (controller.count >= controller.total) {
      return Container(
        padding: const EdgeInsets.all(10),
        alignment: Alignment.center,
        child: Text(
          '~~已经到底了~~',
          style: StylesUtils.customTextStyle(
            fontSize: StylesUtils.fontSize15,
            color: HexColor.color3333,
          ),
        ),
      );
    }
    if (controller.loading.value) {
      return Container(
        padding: const EdgeInsets.all(10),
        alignment: Alignment.center,
        child: const CircularProgressIndicator(
          strokeWidth: 3,
        ),
      );
    }
    return Container(
      padding: const EdgeInsets.all(10),
      alignment: Alignment.center,
      child: Text(
        '~~下拉加载数据~~',
        style: StylesUtils.customTextStyle(
          fontSize: StylesUtils.fontSize15,
          color: HexColor.color3333,
        ),
      ),
    );
  }
}
